<!-- 
购物车页面
 * @Author: zuobufan
 * @Location: 中杰科技研发中心
 * @LastEditors: zuobufan
 * @CreateEditTime: 2021-09-29 10:31:00
 -->
<template>
  <div class="channel">
    <div>
      <van-tabs v-model="currentCategory.id" @click="changeTab(currentCategory.id)">
        <van-tab v-for="item in brotherCategory" :title="item.name" :key="item.id" :name="item.id">
          <h2>{{item.name}}</h2>
          <h3>{{item.front_desc}}</h3>
          <Products :goodsList="goodsList"/>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { GoodsCategoryData, GetCategoryGoodsListData } from "@/request/api";
import Products from "@/components/Products";
export default {
  components: {
    Products
  },
  data() {
    return {
      brotherCategory: [],
      currentCategory: [],
      goodsList: [],
      name: "",
    };
  },
  created() {
    // 分类数据获取
    GoodsCategoryData({
      id: this.$route.query.id
    }).then(res => {
      console.log(res);
      if (res.errno == 0) {
        let { brotherCategory, currentCategory } = res.data;
        this.brotherCategory = brotherCategory;
        this.currentCategory = currentCategory;
      }
    });

    // 分类页面商品列表请求
    GetCategoryGoodsListData({
      categoryId: this.$route.query.id,
      page: 1,
      size: 100
    }).then(res => {
      console.log(res);
      if (res.errno == 0) {
        this.goodsList = res.data.goodsList;
      }
    });
  },
  methods: {
    changeTab(id) {
      // 分类页面商品列表请求
      GetCategoryGoodsListData({
        categoryId:id ,
        page: 1,
        size: 100
      }).then(res => {
        console.log(res);
        if (res.errno == 0) {
          this.goodsList = res.data.goodsList;
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
* {
  font-size: 0.14rem;
}

.channel {
  text-align: center;
  h2 {
    font-size: 0.18rem;
    height: 50px;
    line-height: 50px;
  }
}
</style>
